<template>
  <div class="login-box">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="用户登录" />
    <!-- 用户输入框 -->
    <van-form @submit="hLogin">
      <!-- 手机号 -->
      <van-cell-group>
        <van-field
          v-model.trim="userInfo.mobile"
          required
          type="tel"
          :rules="[{required: true, message: '手机号不能为空' },{pattern,message:'手机号格式错误'}]"
          label="手机号"
        />
      </van-cell-group>
      <!-- 验证码 -->
      <van-cell-group>
        <van-field
          v-model.trim="userInfo.code"
          required
          type="password"
          :rules="[{ required: true, message: '密码不能为空' },{validator, message: '请输入六位验证码' }]"
          label="密码"
        />
      </van-cell-group>
      <!-- 登录按钮 -->
      <div class="login-btn">
        <van-button type="info" native-type="submit" class="btn">登录</van-button>
      </div>
    </van-form>
    <van-button type="info" class="btn" @click="Profile">获取用户信息</van-button>
  </div>
</template>
<script>
import { login, getProfile } from '@/api/user.js'
export default {
  name: 'login-page',
  data () {
    return {
      // 用户登录信息
      userInfo: {
        mobile: 13912345678,
        code: 246810
      },
      // 手机号校验正则
      pattern: /^0{0,1}(13[4-9]|15[7-9]|15[0-2]|18[7-8])[0-9]{8}$/
    }
  },
  methods: {
    // 校验密码函数
    validator (val) {
      return /^\d\d\d\d\d\d$/.test(val)
    },
    // 登录函数
    async hLogin () {
      try {
        // toast提示
        this.$toast.loading({
          duration: 0, // 持续展示 toast,永远不会关闭
          mask: true, // 整体添加一个遮罩
          message: '加载中...'
        })
        // 调用login函数
        const res = await login(this.userInfo.mobile, this.userInfo.code)
        // 请求成功后,使用mutations保存token
        // this.$store.commit('mSetTokenInfo', res.data.data)
        this.$store.commit('mSetTokenInfo', res.data.data.token)
        // console.log(res.data.data)
        // 登录成功,弹出成功提示
        this.$toast.success('登陆成功')
        this.$router.push('/')
      } catch (err) {
        // 打印错误原因
        console.log(err.message)
        this.$toast.fail('登陆失败')
      }
      // 获取用户信息的实验代码
    },
    // 获取用户信息
    // const userInfo1 = await getProfile()
    // console.log(userInfo1)
    async Profile () {
      const userInfo1 = await getProfile()
      console.log(userInfo1)
    }
  }
}
</script>
<style scoped lang='less'>
.login-btn {
  margin: 0.416667rem /* 10/24 */;
  width: 100%;
  .btn {
    width: 90%;
  }
}
</style>
